<script>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'

export default{
  components:{
    HelloWorld
  }
}
</script>

<template>
  <div class="main">
    <img alt="logo" src="./assets/logo.png" class="logo"/>
    <HelloWorld msg="Hello Vue 3 + Vite" />
  </div>
</template>

<style>
#app {
  /* font-family: Avenir, Helvetica, Arial, sans-serif; */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
body,html,#app{
  margin: 0;
  width: 100%;
  height: 100%;
  background: #0c3b7c;
}
.main{
  padding: 0 30px 0 30px;
  background: url("./assets/bg.jpg") no-repeat center center;
  background-position: top center;
  height: 100vh;
}
.main img{
  max-width: 903px;
  padding: 12% 0 5.5% 0;
  width:100%;
  height:auto;
}

/******************************* Wes  **************************************/
::-webkit-scrollbar,::-webkit-scrollbar-track-piece{background-color:transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background-color: #ddd}

.w250{ width: 250px }.w220{ width: 220px }.w200{ width: 200px }
.w180{ width: 180px !important }.w140{ width: 140px }.w120{ width: 120px }.w100{ width: 100px }
.w80{ width: 80px }.w70{ width: 70px }.w60{ width: 60px }
.tl{ text-align: left; }.tr{ text-align: right; }.tc,.center{ text-align: center; }
.lr,.left{ float: right; }.fr,.right{ float: right; }
.none{ display: none; }.clear{ clear: both }.noborder{ border:none; }
.ml8{ margin-left: 8px }.mr8{ margin-right: 8px }.mt8{ margin-top: 8px }.mb8{ margin-bottom: 8px }
.ml10{ margin-left: 10px }.mr10{ margin-right: 10px }.mt10{ margin-top: 10px }.mb10{ margin-bottom: 10px }
.ml18{ margin-left: 18px }.mr18{ margin-right: 18px }.mt18{ margin-top: 18px }.mb18{ margin-bottom: 18px }
.pt18{padding-top: 18px}
.ml20{ margin-left: 20px }
.red{ color: #ff3312 }.blue{ color: blue }.green{ color: green }
iframe{border:none}
.flex{ box-sizing: border-box; display: flex;}
</style>
